<template>
    <div class="box" style=" margin: 10px; width: calc(100vw - 260px);">
        <div class="operation">
            <div class="line-center">
                <el-row>
                    <el-form ref="categoryQueryForm" :model="categoryQueryForm" size="small" label-width="80px">
                        <el-col :span="3">
                            <el-form-item label="类别名" style="width: 220px;">
                                <el-input clearable v-model="categoryQueryForm.name" placeholder="请输入类别名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-button @click="querySubmit" type="primary" plain
                                    icon="el-icon-search">搜索</el-button>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="7"></el-col> -->
                        <el-col :span="5">
                            <el-button @click="HandleBatchDelete" type="danger" plain size="small"
                                icon="el-icon-delete">批量删除</el-button>
                        </el-col>
                        <el-col :span="3"><el-button @click="dialogFlag = true" type="success" plain size="small"
                                icon="el-icon-plus">添加类别</el-button></el-col>
                    </el-form>
                </el-row>
            </div>
        </div>
        <div class="table">
            <table-category-component @handleDelete="deleteById" @changeCoumn="changeCoumnData"
                :table-data="activityType" :column="categoryColumn" />

            <pagination-component :page-query="categoryQueryForm" :page-total="activityTypeTotal"
                @handleSizeChange="sizeChange" @handleCurrentChange="currentChange" />
        </div>
        <DialogCategoryComponent :loading="buttonLoading" :title="titleFlag ? '添加类别' : '修改类别'" :form="categoryForm"
            @closeDialogForm="dialogFlag = false" @submitDialogForm="submit" :dialog-form-visible="dialogFlag" />
    </div>
</template>

<script>
import TableCategoryComponent from '@/components/TableCategoryComponent.vue'
import { mapState, mapActions } from 'vuex'
import PaginationComponent from '@/components/PaginationComponent.vue'
import DialogCategoryComponent from '@/components/DialogCategoryComponent.vue'

export default {
    name: '',
    components: {
        TableCategoryComponent,
        PaginationComponent,
        DialogCategoryComponent,
    },
    data() {
        return {
            categoryQueryForm: {
                name: null,
                page: 1,
                pageSize: 10,
            },
            categoryForm: {
                id:'',
                name: '',
            },
            categoryColumn: [
                { label: '编号', prop: 'id', width: '100px' },
                { label: '活动类别', prop: 'name' },
            ],
            buttonLoading:false,
            dialogFlag: false,
            titleFlag: true,
        }
    },
    mounted() {
        this.pageQueryActivityTypeListActions(this.categoryQueryForm)
    },
    computed: {
        ...mapState('activity', ['activityType', 'activityTypeTotal'])
    },
    methods: {
        ...mapActions('activity', ['pageQueryActivityTypeListActions']),
        ...mapActions('category', ['addActivityCategoryActions', 'updateActivityCategoryActions','delActivityCategoryActions']),

        querySubmit() {
            this.pageQueryActivityTypeListActions(this.categoryQueryForm)
        },
        submit(form) {
            this.buttonLoading = true;
            if (this.titleFlag) {
                console.log('addSubmit', form);
                setTimeout(() => {
                    this.addActivityCategoryActions(form);
                   
                    this.buttonLoading = false;
                    this.dialogFlag = false;
                }, 500);
            } else {
                setTimeout(() => {
                    console.log('Submit123', form);
                    this.updateActivityCategoryActions(form);
                    this.buttonLoading = false;
                    this.dialogFlag = false;
                }, 500);
            }

            setTimeout(() => {
                this.pageQueryActivityTypeListActions(this.categoryQueryForm)
            }, 1000);
        },
        changeCoumnData(row) {
            this.categoryForm.id = row.id;
            this.categoryForm.name = row.name;
            this.titleFlag = false;
            this.dialogFlag = true;
        },
        deleteById(id) {
            this.delActivityCategoryActions(id);
            setTimeout(() => {
                this.pageQueryActivityTypeListActions(this.categoryQueryForm)
            }, 1000);
        },
        
        HandleBatchDelete() { },

        sizeChange(val) {
            categoryQueryForm.pageSize = val;
            this.pageQueryActivityTypeListActions(this.categoryQueryForm);
        },
        currentChange(val) {
            categoryQueryForm.page = val;
            this.pageQueryActivityTypeListActions(this.categoryQueryForm);
        }
    },

    created() { }
}
</script>

<style lang='scss' scoped>
.operation {

    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 55px;
    // margin: 5px;

    .line-center {
        padding: 10px 10px 10px 5px;
    }
}

.table {
    padding: 20px;
    margin-top: 10px;
    max-height: calc(100vh - 55px - 55px - 60px);
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>